<template>
    <div style="background-color: rgba(119, 210, 217, 0.567);" class="content">
        <div class="avartar">
            <div class="imgcontain">
                <img class="avatar-img" :src="avartarUrl" alt="" data-v-ef170350="">
            </div>
        </div>
        <div class="itemright">
            <div class="user-nickname">{{userName}}</div>
            <div class="time">发布于 {{time}}
            </div>
            <div class="talk-content">{{content}}
            </div>
            <div class="talk-images">
                <div class="el-col el-col-24 el-col-md-4">
                    <div class="el-image">
                        <img aspect-ratio="1" max-height="200" :src="talkImage"
                            class="el-image__inner"><!--v-if--><!--v-if--></div>
                </div>
                <audio class="sound" :src="audioUrl" controls></audio>
            </div>

        </div>
    </div>
</template>
<script setup lang='ts'>
    const props = defineProps({
        userName: {
            type: String,
        },
        avartarUrl: {
            type: String,
        },
        time: {
            type: String,
        },
        content: {
            type: String,
        },
        talkImage: {
            type: String,
        },
        audioUrl:{
            type:String
        }
    })
</script>
<style scoped>
    .content {
        display: flex;
        padding: 2rem;
        border-radius: 1rem;
        margin-bottom: 1.5rem;
   
    }

    .avartar {
        flex-shrink: 0;
        max-width: 10rem;

    }


    .avatar-img {
        transform: rotate(1turn);
    }

    .imgcontain {

        width: 2.5rem;
    }

    .avatar-img {
        transition-property: transform;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        transition-duration: .8s;
        transform: rotate(-1turn);
        border-radius: 9999px;
    }

    .avatar-img:hover {
        transform: rotate(0);
    }

    img {
        max-width: 60%;
        flex-shrink: 0;
        height: auto;
        box-sizing: border-box;
        border-width: 0;
        border-style: solid;
        border-color: #e5e7eb;
 
    }

    .itemright {
        flex: 1;
        margin-left: 10px;
    }


    .user-nickname {
        font-weight: 530;
        font-size: .875rem;
        line-height: 1.25rem;
    }

    .time {
        color: #999;
        font-size: 13px;
        margin-top: 4px;
    }

    .talk-content {
        margin-top: 10px;
        font-size: 14px;
        line-height: 26px;
        white-space: pre-line;
        word-wrap: break-word;
        word-break: break-all;
    }

    .talk-images {
        display: flex;
        justify-content: space-between;
        margin-top: 8px;
        align-items: center;
    }

    .images-items {
        cursor: pointer;
        border-radius: 3px;
        margin-right: 5px;
    }

    .sound {
        margin-top: 20px;
        margin-right: 100px;
    }
/* 移动端的样式适配 */
@media (max-width: 600px) {
    .content {
        /* 在小屏幕上，可能需要减少一些填充来利用空间 */
        padding: 1rem;
    }

    .avartar {
        /* 在手机屏幕上，用户头像可能需要更小 */
        max-width: 7.5rem;
    }

    .imgcontain {
        /* 对头像尺寸进行适配 */
        width: 2rem;
        height: 2rem;
    }

    .avatar-img {
        /* 确保图片在容器内完全显示 */
        width: 100%;
        height: auto;
    }

    .itemright {
        /* 在小屏幕上，可能需要减少一些间距 */
        margin-left: 5px;
    }

    .user-nickname,
    .time,
    .talk-content {
        /* 对文字大小也可以根据需要适配 */
        font-size: 12px;
    }

    .talk-images {
        /* 调整图片显示，保证在小屏幕上同样优雅 */
        flex-wrap: wrap; /* 在需要时让图像换行 */
    }


    .sound {
        /* 调整音频播放器的位置或大小 */
        margin-top: 10px;
        margin-right: 50px;
        width: 100%; /* 播放器宽度适应容器宽度 */
    }
}
</style>